<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <title>xuan lab2</title>
</head>
<body>
        <div class="b-example-divider"></div>
        <div class="container px-4 py-5" id="custom-cards">
            <h2 class="pb-2 border-bottom">Custom cards</h2>
            <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
                <div class="col">
                    <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg"
                        style="background-image: url('unsplash-photo-1.jpg');">
                        <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
                            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h3>
                            <ul class="d-flex list-unstyled mt-auto">
                                <li class="me-auto"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32"
                                        height="32" class="rounded-circle border border-white"> </li>
                                <li class="d-flex align-items-center me-3"> <svg class="bi me-2" width="1em"
                                        height="1em" role="img" aria-label="Location">
                                        <use xlink:href="#geo-fill"></use>
                                    </svg> <small>Earth</small> </li>
                                <li class="d-flex align-items-center"> <svg class="bi me-2" width="1em" height="1em"
                                        role="img" aria-label="Duration">
                                        <use xlink:href="#calendar3"></use>
                                    </svg> <small>3d</small> </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg"
                        style="background-image: url('unsplash-photo-2.jpg');">
                        <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
                            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple
                                lines</h3>
                            <ul class="d-flex list-unstyled mt-auto">
                                <li class="me-auto"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32"
                                        height="32" class="rounded-circle border border-white"> </li>
                                <li class="d-flex align-items-center me-3"> <svg class="bi me-2" width="1em"
                                        height="1em" role="img" aria-label="Location">
                                        <use xlink:href="#geo-fill"></use>
                                    </svg> <small>Pakistan</small> </li>
                                <li class="d-flex align-items-center"> <svg class="bi me-2" width="1em" height="1em"
                                        role="img" aria-label="Duration">
                                        <use xlink:href="#calendar3"></use>
                                    </svg> <small>4d</small> </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg"
                        style="background-image: url('unsplash-photo-3.jpg');">
                        <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
                            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h3>
                            <ul class="d-flex list-unstyled mt-auto">
                                <li class="me-auto"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32"
                                        height="32" class="rounded-circle border border-white"> </li>
                                <li class="d-flex align-items-center me-3"> <svg class="bi me-2" width="1em"
                                        height="1em" role="img" aria-label="Location">
                                        <use xlink:href="#geo-fill"></use>
                                    </svg> <small>California</small> </li>
                                <li class="d-flex align-items-center"> <svg class="bi me-2" width="1em" height="1em"
                                        role="img" aria-label="Duration">
                                        <use xlink:href="#calendar3"></use>
                                    </svg> <small>5d</small> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
        class="astro-vvvwv3sm"></script>
</body>

</html>